import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, message, Button, Select, Input } from 'antd';
import { faultCodeList, faultTypeList } from "../../../fetch/fetchApi";
import classNames from 'classnames';

const {Option} = Select;
class FaultCodeList extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10'
        }
        this.tableColumns = [
            {
                title: '故障代码',
                dataIndex: 'name',
                key: 'key'
            }, {
                title: '所属类别',
                dataIndex: 'typeStr',
                key: 'typeStr',
                className: 'column-nowrap'
            }, {
                title: '优先级',
                dataIndex: 'priorityStr',
                key: 'priorityStr',
            }, {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Button type='primary' onClick={() => this.handleSelectBtnClick(record)}>选择</Button>
                )
            }
        ];
        this.combineTypeOptions();
    }

    combineTypeOptions = () => {
        faultTypeList({
            code: "351"
        }).then((res) => {
            console.log(res);
            if (!res) {
                return;
            }
            let typeOptions = [];
            if (res.data.code === "200") {
                const typeArr = res.data.data;
                for (let item in typeArr) {
                    typeOptions.push(<Option value={typeArr[item].c_id} key={typeArr[item].c_id}>{typeArr[item].c_name}</Option>);
                }
            }
            this.setState({
                typeOptions: typeOptions
            })
        })
    }

    handleSelectBtnClick =(params = {}) => {
        if(!params.id){
            message.error("数据异常！");
            return;
        }
        this.props.handle(params);
    }

    faultCodeList = (params = {}) => {
        this.setState({
            orderListLoading: true
        })
        faultCodeList(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = parseInt(this.query.page);
            this.setState({
                orderListLoading: false,
                gridData: res.data.data,
                pagination,
            });
        });
    }

    queryHandler = (e) => {
        this.query.page = 1;
        this.faultCodeList();
    }

    componentDidMount() {
        this.faultCodeList();
    }

    componentWillReceiveProps(nextProps) {
        //this.faultCodeList();
    }

    handleTypeSelectChange = (e) => {
        if (e === "-1") {
            this.query.type = null;
        } else {
            this.query.type = e;
        }

    }

    handleNameInputChange = (e) => {
        this.query.name = e.target.value;
    }

    handleTableChange=(pagination, filters, sorter) => {
        console.log(pagination);
        this.query.page = pagination.current;
        this.faultCodeList();
    }

    render() {
        const className = classNames({
            'sc-table': true,
            'table-center': 'table-center'
        });
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                    <Row gutter={8}>
                        <Col lg={3} xl={3} className="whole-fill">
                            <Select onChange={this.handleTypeSelectChange} placeholder="所属类别" defaultValue="-1" style={{
                'width': '100%'
            }}>
                                <Option value="-1">全部</Option>
                                {this.state.typeOptions}
                            </Select>
                        </Col>
                        <Col lg={8} xl={8}>
                            <Input onChange={this.handleNameInputChange} type="text" placeholder="请输入故障名称"/>
                        </Col>
                        <div  className="button-inlineBlock">
                            <Button type="primary" onClick={this.queryHandler}>查询</Button>
                        </div>
                    </Row>
                </div>

                <div className="page-panel">
                    <Table className={className} onChange={this.handleTableChange} dataSource={this.state.gridData} loading={this.state.orderListLoading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>
            </div>
        )
    }
}
export default FaultCodeList;
